import { CloseOutlined } from '@ant-design/icons';
import { Button, Segmented } from 'antd';
import React, { useEffect, useState } from 'react';
import { useContextSelector } from 'use-context-selector';

import { SvgIcon } from '@/components/icon';
import { t } from '@/locales/i18n';
import { getNanoid } from '@/pages/chat/tools/tools';
import { AppTypeEnum } from '@/types/app/type';
import { PluginRunBoxTabEnum } from '@/types/workflow/components/PluginRunBox/constants';
import { StoreEdgeItemType } from '@/types/workflow/edge';
import { StoreNodeItemType } from '@/types/workflow/node';

import { AppContext } from '../../context';

import useChatTest from './useChatTest';

const ChatTest = ({
  isOpen,
  nodes = [],
  edges = [],
  onClose,
}: {
  isOpen: boolean;
  nodes?: StoreNodeItemType[];
  edges?: StoreEdgeItemType[];
  onClose: () => void;
}) => {
  const { appDetail } = useContextSelector(AppContext, (v) => v);
  const isPlugin = appDetail.type === AppTypeEnum.plugin;
  const [initChatId, setInitChatId] = useState<string>('');

  const { ChatContainer, chatRecords } = useChatTest({
    nodes,
    edges,
    chatConfig: appDetail.chatConfig,
    initChatId,
  });

  useEffect(() => {
    setInitChatId(getNanoid());
  }, []);

  return (
    <>
      <div
        className={`${isOpen ? 'block' : 'hidden'} fixed bottom-0 left-0 right-0 top-0 z-[300]`}
        onClick={onClose}
      />
      <div
        className="absolute right-5 top-32 z-[300] flex flex-col overflow-hidden rounded-xl border border-line-2 bg-white shadow-md"
        style={{
          height: isOpen ? '84%' : '0',
          width: isOpen ? '50%' : '0',
          transition: '.2s ease',
        }}
      >
        {isPlugin ? (
          <div className="flex items-start justify-between border-b-2 bg-gray-100 px-3 pt-3">
            <Segmented
              block
              options={[
                { label: t('common.Input'), value: PluginRunBoxTabEnum.input },
                ...(chatRecords.length > 0
                  ? [
                      { label: t('common.Output'), value: PluginRunBoxTabEnum.output },
                      { label: t('common.all_result'), value: PluginRunBoxTabEnum.detail },
                    ]
                  : []),
              ]}
              // value={pluginRunTab}
              // onChange={setPluginRunTab}
              className="gap-5 py-0 text-sm"
            />
            <Button type="text" className="mt-1" icon={<CloseOutlined />} onClick={onClose} />
          </div>
        ) : (
          <div className="flex px-2 py-2">
            <div className="ml-2 flex flex-1 items-center text-base font-font-weight-600 text-text-5">
              <SvgIcon icon="workflowStart" size="20px" className="mr-2" />
              {t('core.chat.Run test')}
            </div>
            <Button
              type="text"
              className="ml-4 bg-none"
              icon={<CloseOutlined />}
              aria-label=""
              onClick={onClose}
            />
          </div>
        )}

        <div className="flex-1 overflow-auto bg-[#eceff7]">
          <ChatContainer />
        </div>
      </div>
    </>
  );
};

export default React.memo(ChatTest);
